<template>
  <el-card style="height: 100vh;">
    <template #header>
      <div class="card-header">
        <span>对话侧</span>
      </div>
    </template>
    <div style="display: flex; justify-content: center">
      <div class="mobileDiv" style="">
        <el-scrollbar height="550px">
          <dl>
            <dd
              v-for="(message, index) in data.messages"
              :key="index"
              :class="message.role === 'user' ? 'user' : 'assistant'"
            >
              <text
                style="font-size: 25px"
                :class="message.role === 'user' ? 'userText' : 'assistantText'"
              >
                {{ message.content }}
              </text>
            </dd>
          </dl>
        </el-scrollbar>
        <div class="footer">
          <el-input v-model="input" width="70%" />
          <el-button class="sendButton" type="primary" @click="send">
            发送
          </el-button>
        </div>
      </div>
      <!-- <div class="mobileDiv" style="margin-left: 20px">
        <iframe src="https://yiyan.baidu.com/" class="iframe" />
      </div> -->
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { chatAPI, getAccessTokenAPI } from '@/api/chat/index'

const input = ref('')
const data = reactive({
  messages: [],
  temperature: 0.95,
  top_p: 0.8,
  penalty_score: 1,
  disable_search: false,
  enable_citation: false,
  response_format: 'text',
  // "stream": true
}) as any

const answer = reactive([])

const send = () => {
  console.log(JSON.stringify(answer))
  const userInput = input.value.trim()
  if (!userInput) {
    console.log('请输入消息内容')
    return
  }
  data.messages.push({
    role: 'user',
    content: userInput,
  })
  chatAPI(data).then(async (res: any) => {
    // console.log(res, '===')
    input.value = ''
    const resObj = {} as any
    resObj.role = 'assistant'
    resObj.content = res.result || ''
    // resObj.content = res.data.result || ''
    data.messages.push(resObj)
    // console.log('发送请求之后的data' + JSON.stringify(data))
  })
}

onMounted(() => {
  // getAccessTokenAPI()
})
</script>

<style lang="scss" scoped>
.mobileDiv {
  border: 1px black solid;
  height: 600px;
  width: 300px;
  border-radius: 10px;
  box-shadow: 5px 5px 10px #ccc;
  position: relative;
  z-index: 10;
}

.iframe {
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

.footer {
  display: flex;
  position: absolute;
  bottom: 5px;
  left: 5px;
  width: 95%;
}

.sendButton {
  margin-left: 5px;
}

// 对话侧css
.user {
  margin-top: 5px;
  display: flex;
  align-items: center;
  /* height:50px; */
  /* background-color:#e7f8ff; */
}

.assistant {
  margin-top: 5px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background-color: white;
}

.userText {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dedede;
  background-color: #e7f8ff;
}

.assistantText {
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #dedede;
  background-color: #f2f2f2;
}
</style>
